<template>
  <div class='container'>
    <el-dialog
        :visible="showDialog"
        width="900px"
        title="题目预览"
        @open="handleOpen"
        @close="handleClose">

      <el-row>
          <el-col :span="6">【题型】: {{ myData.questionType | type }} </el-col>
          <el-col :span="6">【编号】: {{ myData.id }} </el-col>
          <el-col :span="6">【难度】: {{ myData.difficulty | diff}} </el-col>
          <el-col :span="6">【标签】: {{ myData.tags }} </el-col>
          <el-col :span="6">【学科】: {{ myData.subjectName }} </el-col>
          <el-col :span="6">【目录】: {{ myData.directoryName }} </el-col>
          <el-col :span="6">【方向】: {{ myData.direction }} </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>

      【题干】: <div style="color:blue; padding-bottom:10px" v-html="myData.question"></div>

      <div v-if="myData.questionType !== '3'">
          <div style="margin-bottom : 5px">{{ myData.questionType | type }}  <span>选项：（以下选中的选项为正确答案）</span> </div>

          <div v-for="item in myData.options" :key="item.id" style="padding : 10px 0">
            <!-- 单选题 -->
            <el-radio v-if="myData.questionType === '1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
            <!-- 多选题  复选框 -->
            <el-checkbox v-else :value="item.isRight === 1 ? true : false">{{ item.title }}</el-checkbox>
          </div>
      </div>

       <!-- 分割线 -->
      <el-divider></el-divider>

      【参考答案】: <el-button type="danger" size="small" @click="showVideo">视频答案预览</el-button>
        <div class="video" v-show="video">
          <video :src="myData.videoURL" controls>
            <meta name="referrer" content="never">
          </video>
        </div>

       <!-- 分割线 -->
      <el-divider></el-divider>

      【答案解析】: <span v-html="myData.answer"></span>

       <!-- 分割线 -->
      <el-divider></el-divider>

      【题目备注】: <span>{{ myData.remarks }}</span>

      <!-- 底部按钮 -->
      <div slot="footer" class="footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'

export default {
  name: 'QuestionsPreview',
  data () {
    return {
      // 准备 渲染的数组
      myData: {},
      // 是否展示视频
      video: false
    }
  },
  // 过滤器
  filters: {
    // 题型
    type (value) {
      if (value) {
        const obj = questionType.find(item => item.value === +value)
        return obj.label + '题'
      }
    },
    // 难度
    diff (value) {
      if (value) {
        const res = difficulty.find(item => item.value === +value)
        return res.label
      }
    }
  },
  props: {
    // 弹框的显示与隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    // 接收题库信息 id
    data: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 关闭对话框
    handleClose () {
      this.$emit('update:showDialog', false)
      // 关闭视频
      this.video = false
    },
    // 对话框打开  发送详情  请求  数据回显
    async handleOpen () {
      const res = await detail({ id: this.data.id })
      this.myData = res.data
      // console.log(this.myData, '9999')
    },
    // 是否展现视频
    showVideo () {
      // console.log('ddd')
      this.video = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  .el-col{
    padding:10px 0
  }
  .footer{
    text-align: right;
  }
  .video{
    width: 600px;
    height: 400px;
    video{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
